<template>
	<el-card class="layout-query">
		<el-form ref="queryForm" :inline="true">
			<el-form-item label="单位名称">
				<el-input v-model="state.queryParams.competentUnitName" placeholder="单位名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="当前状态">
				<el-select v-model="state.queryParams.status" placeholder="请选择" style="width: 100%" clearable>
					<el-option v-for="item in optionList1" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-space style="width: 100%; justify-content: flex-end">
			<el-space>
				<el-button type="primary" @click="detailRecord(false, {})">新增</el-button>
			</el-space>
		</el-space>
		<el-table
			v-loading="state.dataListLoading"
			:data="state.dataList"
			class="mt20"
			stripe
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column label="主管单位名称" align="center" prop="competentUnitName" />
			<el-table-column label="排序" align="center" prop="theOrder"> </el-table-column>
			<el-table-column label="备注" align="center" prop="remark"> </el-table-column>
			<el-table-column label="操作人" align="center" prop="userName"> </el-table-column>
			<el-table-column label="有效性" fixed="right" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="90">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="编辑" style="cursor: pointer; margin: 0 6px" @click="handledit(true, scope.row)">
						<Edit />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.queryParams.pageNum"
			:page-size="state.queryParams.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
		</el-pagination>
	</el-card>

	<!-- 新增编辑 -->
	<cmDialog v-model="state.visible" :modal-title="state.isUpdateFlag ? '编辑' : '新增'" @close="cancel">
		<el-form ref="updateDialogRef" :model="utUpdateForm" :rules="utRules" style="margin-top: 20px" label-width="120px">
			<el-form-item label="主管单位名称" prop="competentUnitName">
				<el-input v-model="utUpdateForm.competentUnitName"></el-input>
			</el-form-item>
			<el-form-item label="排序" prop="theOrder">
				<el-input v-model="utUpdateForm.theOrder" type="number"></el-input>
			</el-form-item>

			<el-form-item label="备注">
				<el-input v-model="utUpdateForm.remark" type="textarea" :rows="4" style="width: 100%"></el-input>
			</el-form-item>
		</el-form>

		<div class="dialog-foot" style="padding-bottom: 12px; text-align: center">
			<el-button type="primary" @click="submit(updateDialogRef)">提交</el-button>
			<el-button @click="cancel">关闭</el-button>
		</div>
	</cmDialog>
</template>
<script setup lang="ts">
import { querylistApi, saveOrUpdateApi, updateStatusApi } from '@/api/system/unit'
import cmDialog from '@/components/cm-dialog/index.vue'
import { useDictionaryStore } from '@/store/modules/dictionary'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
const dictionaryStore = useDictionaryStore()
const state = reactive({
	queryParams: {
		competentUnitName: '',
		status: '',
		pageNum: 1,
		pageSize: 10
	},
	dataListLoading: false,
	total: 100,
	dataList: [],
	visible: false,
	isUpdateFlag: false
})

const defaultFilter = ref({
	competentUnitName: '',
	status: '',
	pageNum: 1,
	pageSize: 10
})

const optionList1 = [
	{
		value: '1',
		label: '有效'
	},
	{
		value: '0',
		label: '无效'
	}
]

const handleStatusChange = async row => {
	try {
		updateStatusApi({
			id: row.id,
			iFlag: row.status
		}).then(res => {
			ElMessage.success('更改成功')
			getDataList()
			dictionaryStore.initDictionary()
		})
	} catch (error) {
		// 失败时恢复原来的状态

		ElMessage.error('操作失败')
	}
}

const getdd = () => {
	console.log(utUpdateForm.status)
}
const detailRecord = (isUpdate: Boolean, row: any) => {
	state.visible = true
	state.isUpdateFlag = isUpdate
}
const handleSearch = () => {
	state.queryParams.pageNum = 1
	getDataList()
}

const handleReset = () => {
	state.queryParams = { ...defaultFilter.value }
	state.queryParams.pageNum = 1
	state.dataList = []
	getDataList()
}
onMounted(() => {
	getDataList()
})

const getDataList = () => {
	state.dataListLoading = true
	const data = {
		competentUnitName: state.queryParams.competentUnitName,
		status: state.queryParams.status,
		pageNum: state.queryParams.pageNum,
		pageSize: state.queryParams.pageSize
	}
	querylistApi(data).then(res => {
		state.dataListLoading = false
		state.dataList = res.data.list || []
		state.total = res.data.total || 0
	})
}

// const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
//   pageInfo.value.page = page;
//   pageInfo.value.limit = size;
//   list.value = [];
//   getuser_list();
// };
const handleSizeChange = (val: number) => {
	state.queryParams.pageSize = val
	state.dataList = []
	getDataList()
}
const handleCurrentChange = (val: number) => {
	state.queryParams.pageNum = val
	state.dataList = []
	getDataList()
}
// 新增编辑
const updateDialogRef = ref<FormInstance>()
const utUpdateForm = reactive({
	id: '',
	competentUnitName: '',
	theOrder: null,
	remark: ''
})
const utRules = reactive<any>({
	competentUnitName: [{ required: true, message: '请输入主管单位名称', trigger: 'blur' }],
	theOrder: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})

const handledit = (isUpdate: Boolean, row: any) => {
	state.visible = true
	state.isUpdateFlag = isUpdate
	if (isUpdate) {
		utUpdateForm.id = row.id
		utUpdateForm.competentUnitName = row.competentUnitName
		utUpdateForm.theOrder = row.theOrder
		utUpdateForm.remark = row.remark
	}
}
const submit = async (formRef: FormInstance) => {
	if (!formRef) {
		return
	}

	await formRef.validate((valid, fields) => {
		if (valid) {
			saveOrUpdateApi({
				competentUnitName: utUpdateForm.competentUnitName,
				theOrder: utUpdateForm.theOrder,
				remark: utUpdateForm.remark,
				id: utUpdateForm.id ? utUpdateForm.id : ''
			}).then(() => {
				ElMessage({
					type: 'success',
					message: '操作成功'
				})
				state.visible = false
				getDataList()
				dictionaryStore.initDictionary()
			})
		} else {
			if (!fields) {
				return
			}
		}
	})
}
const cancel = () => {
	state.visible = false
	utUpdateForm.id = ''
	utUpdateForm.competentUnitName = ''
	utUpdateForm.theOrder = null
	utUpdateForm.remark = ''
}
</script>

<style lang="scss" scoped></style>
